<template>
<div style="height:100%">
  <div class="prdlist">
  <el-form ref="form" :model="form" label-width="120px">

  <el-form-item label="客户类型">
    <el-radio-group v-model="form.customertype">
      <el-radio  :label="2"  >企业</el-radio>
      <el-radio :label="1" >个人</el-radio>
      <el-radio :label="3" >其它机构</el-radio>
    </el-radio-group>
  </el-form-item>
    <el-form-item label="客户名称">
    <el-input v-model="form.username" ></el-input>
  </el-form-item>

   <el-form-item v-if="form.customertype==1" label="公司名称">
    <el-input v-model="form.companyname" ></el-input>
  </el-form-item>

  <div style=" display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;">
  <el-form-item label="联系人1:">
    <el-input v-model="form.manname" ></el-input>
  </el-form-item>
   <el-form-item label="电话">
    <el-input v-model="form.phone" ></el-input>
  </el-form-item>
     <el-form-item label="职位">
    <el-input v-model="form.work" ></el-input>
  </el-form-item>
       <el-form-item label="微信号">
    <el-input v-model="form.weixinhao" ></el-input>
  </el-form-item>
    </div>

      <div style="display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;">
    <el-form-item label="联系人2:">
    <el-input v-model="form.manname2" ></el-input>
  </el-form-item>
    
   <el-form-item label="电话">
    <el-input v-model="form.phone2" ></el-input>
  </el-form-item>
     <el-form-item label="职位">
    <el-input v-model="form.work2" ></el-input>
  </el-form-item>
       <el-form-item label="微信号">
    <el-input v-model="form.weixinhao2" ></el-input>
  </el-form-item>
  </div>
        <div style=" display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;">
    <el-form-item label="联系人3:">
    <el-input v-model="form.manname3" ></el-input>
  </el-form-item>
   <el-form-item label="电话">
    <el-input v-model="form.phone3" ></el-input>
  </el-form-item>
 <el-form-item label="职位">
    <el-input v-model="form.work3" ></el-input>
  </el-form-item>
  <el-form-item label="微信号">
    <el-input v-model="form.weixinhao3" ></el-input>
  </el-form-item>
  </div>
  <el-form-item label="客户所在地区">
<el-cascader
ref="cc"
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </el-form-item>
       <el-form-item label="联系地址">
    <el-input v-model="form.addr2" ></el-input>
  </el-form-item>
          <div v-if="form.customertype!=1" style=" display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;">
    <el-form-item label="企业所属行业">
    <el-input v-model="form.hangye" ></el-input>
  </el-form-item>
   <el-form-item label="企业主营业务">
    <el-input v-model="form.yewu" ></el-input>
  </el-form-item>
 <el-form-item label="企业人员规模">
    <el-input v-model="form.guimo" ></el-input>
  </el-form-item>
  <el-form-item label="企业官网">
    <el-input v-model="form.website" ></el-input>
  </el-form-item>
    <el-form-item label="企业公众号">
    <el-input v-model="form.gzh" ></el-input>
  </el-form-item>
  </div>

  <el-form-item label="意向产品">
  <el-checkbox-group @change="setitems" v-model="checkList">
    <el-checkbox label="企业补充医疗险"></el-checkbox>
    <el-checkbox label="运动赛事组织者责任险"></el-checkbox>
  </el-checkbox-group>
  </el-form-item>
  
  <el-form-item label="需求说明">
    <el-input type="textarea" v-model="form.comment"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="updatepossiblemember">提交</el-button>
  </el-form-item>

</el-form>
  <div>

  </div>
  </div>
</div>
</template>
<script>
import { updatepossiblemember,getpossiblemember} from '@/api/policy'


import { regionData } from 'element-china-area-data'
  export default {
    name:'editlead',
    data() {
      return {
        options: regionData,
        checkList:['企业补充医疗险'],
        selectedOptions: [],
        workarea:'',
        form: {
          username: '',
          companyname:'',
          manname:'',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: 2,
          customertype: '',
          comment: '',
          addr:'',
          addrcode:'',
          addr2:'',
          phone:'',
        }
      }
    },
  mounted(){
    console.log(this.options)
    this.getpossiblemember(this.$route.query.id);
  },
    methods: {
      setitems(newvalue){
        console.log('newvalue')
        console.log(newvalue)
        var newvalues="";
                  for(var i=0;i<newvalue.length;i++)
                        newvalues+=newvalue[i]+","
                        console.log(newvalues)
           this.form.health=newvalues.substring(0,newvalues.length-1);
                                   console.log('health')

                                   console.log(this.form.health)


      },
        getpossiblemember(id){
                    this.$loadingshow();

 getpossiblemember({id:id}).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
            this.form=res.result;
            
            this.selectedOptions=JSON.parse(this.form.addrcode);
            var items=this.form.health.split(",");
            var str=[];
            for(var i=0;i<items.length;i++)
            {
                    str.push(items[i]);
            }
            console.log(str)
           this.checkList=str;
          //  this.form.health='';
           console.log(this.checkList)
          //  this.form={};
          //  this.checkList=[];
          //  this.selectedOptions=[];
           //   document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
        } 
        else{
          this.$toast(res.message)
        }
      });

        },
      updatepossiblemember(){
        //  this.form.updatetag=1;
        if(!this.form.customertype)
        {
          this.$toast('未选择客户类型')
          return;
        }
        console.log(this.form.health)
         if(!this.form.health)
        {
          this.$toast('未选择意向产品')
          return;
        }
         if(!this.form.username)
        {
          this.$toast('客户名称未输入')
          return;
        }
                 if(!this.form.manname)
        {
          this.$toast('第一个联系人名称未输入')
          return;
        }
      if(!this.form.phone)
        {
          this.$toast('第一个联系人电话未输入')
          return;
        }
      if(!this.form.addr)
        {
          this.$toast('所在地区未输入')
          return;
        }
              if(!this.form.addr2)
        {
          this.$toast('联系地址未输入')
          return;
        }
         if(!this.form.comment)
        {
          this.$toast('需求说明未输入')
          return;
        }
          this.$loadingshow();
       updatepossiblemember(this.form).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
          if(res.result=='1')
             this.$toast('修改成功')
             else
               this.$toast(res.message)
          //  this.form={};
          //  this.checkList=[];
          //  this.selectedOptions=[];
           //   document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
        } 
        else{
          this.$toast(res.message)
        }
      });



      },
      handleChange(){
   console.log( this.selectedOptions);
   this.$nextTick(function(){

     var dts=this.$refs.cc.getCheckedNodes();
 this.form.addr=dts[0].parent.parent.label+dts[0].parent.label+dts[0].label;
 this.form.addrcode=JSON.stringify(this.selectedOptions);
   })

      },
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<style lang="scss" scoped>
.prdlist{
  width:90%;
  height: 100%;
  margin: 2%;
}


</style>
